<template>
	<view class="container" style="background-color: #ffff;">
				<view class="wrap">
					<view class="page-box">
						<view class="order" v-for="(res, index) in remark" :key="res.id">
							<uni-card > 
								<!-- 订单信息 -->
								<view class="top" @click="">
									<view class="left">
										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
										<view class="store">{{ res.order_sn }}</view>
										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
									</view>
									<view class="right">已评价</view>

								</view>
								<!-- 头像、个人信息 -->
								<view class="top" @click="openPage('pages/setting/setting')" style="height: 40px;">
									<view class="left" style="height: 36px;">
										<view class="u-m-r-10">
											<view>
												<u-avatar :src="userInfo.avatar_file.url" size="38"></u-avatar>
											</view>
										</view>
									</view>
									<view class="content" style="height: 36px;width: 70%;">
										<view>
											<textarea auto-height="false" maxlength="10" :placeholder="userInfo.nickname"
												disabled="true"  style="height: 18px;line-height: 18px;"/>
										<textarea auto-height="false" maxlength="7" :placeholder="getRemarkTime(res.create_time)"
											disabled="true"style="height: 18px;line-height: 18px;margin-top: 4px;" />
										</view>
									</view>
									<view class="right">
										<view class="right">评分:{{ res.evaluate_score }}星</view>
									</view>
								</view>
								<!-- 评价 -->
								<view style="width: 100%;border: medium dashed #ccccd6;">
									<uni-table   :emptyText="'收货地址：'+ getAddressCode(index)">
										<uni-tr > 
											<uni-td @click="" colspan="9">
												<view class="gl-name"></view>
												<view class="gl-descript">{{res.evaluate_text}}</view>
												<view class="gl-price" style="color: red;"></view>
											</uni-td>
											<uni-td style="width: 180rpx;" colspan="1">
												<image style="width: 170rpx;height: 170rpx;"
													:src="res.evaluate_image1" @click="">
												</image>
											</uni-td>
										</uni-tr>
									</uni-table>
								</view>
								
								<view class="item" v-for="(item, index) in list[index]" :key="index" @click="">
									<view class="left">
										<image :src="imgUrl+item.pic" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">{{ item.name }} </view> 
										<view class="type">{{ item.name }}</view> 
										<view class="delivery-time">{{ item.descript }}</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{ item.price }}
										</view>
										<view class="number">x{{ item.count }}</view>
									</view>
								<!-- </view> -->
								</view>
								<view class="total" style="color: red;">
									实际优惠
									<text class="total-price">
										￥{{ getPrice(index) }}
									</text>
								</view>
								<view class="total" @click="">
									共{{ totalNum(res.items) }}件商品 合计:
									<text class="total-price">
										￥{{getRealPrice(index)}}
									</text>
								</view> 
								
								</uni-card>
						</view> 
					</view> 
				</view>
 
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database()
	let order = []
	let address= []
	let totalPrice=[]
	let realPrice=[]
	let goods=[]
	let listgoods=[]
	export default {
		data() {
			return {
				collectionList: "t_shop_orderevaluate", 
				imgUrl:'https://zhy-demo.oss-cn-hangzhou.aliyuncs.com/upload/',
				where: '',
				uid: '',
				swiperCurrent: 0,
				current: 0,
				goods:[],
				remark:[],
				// address:'',
				order:[], 
				list :[],
			}
		},
		onLoad() {
			this.uid = uniCloud.getCurrentUserInfo().uid
			console.log(this.uid)
			this.where = {
				users_id: this.uid
			}
			this.getData()
			// console.log(this.remark[0])
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		mounted(){ 
			let count =0
		   let timer = setInterval(()=> {
		       this.getData() 
			   count+=1
			   // console.log(this.pic1)
		   }, 5000)
			// if(count==3){
			// 	clearInterval(timer)
			// }
		},
		computed:{
			userInfo() {
				return store.userInfo
			},
		},
		methods: {
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx)
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				// this.$refs.tabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				if (item) {
					item.map(val => {
						if (val.number) {
							num += val.number
						}
						if (val.count) {
							num += val.count
						}
					});
				}
				return num;
			},
			getPrice(idx) {
				let x = parseInt(this.getTotalPrice(idx))
				let y = parseInt(this.getRealPrice(idx))
				console.log(x-y)
				return x-y;
			},
			toGoods(id) {
				this.$router.push({
					path: '/goods/' + id
				})
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			 getRemarkTime(timestamp){ 
				let remarkTime = new Date(timestamp).toLocaleString('chinese', {hour12: false})
				return remarkTime
			},
			getAddressCode(idx){
				// console.log(address[idx])
				return address[idx]
			},
			getTotalPrice(idx){
				return totalPrice[idx]
			},
			getRealPrice(idx){ 
				return realPrice[idx]
			},
			getAddress(code,detail,idx) { 
				// console.log(code,detail,idx)
				//拼装查询条件  
				let query = '\"code==' + '\'' + code + '\'' + '\"' 
				db.collection('opendb-city-china')
					.get({
						getTreePath: {
							"startWith": query //查询具体code所对应的省市区  
						}
					})
					.then((res) => {
						const resdata = res.result.data
						let full = resdata[0].name + resdata[0].children[0].name + resdata[0].children[0]
							.children[0].name + detail
						// this.remark[idx].address = full 
						address.push(full)
						// console.log(address[0])
					})
					.catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					})  
			}, 
			getOrder(orderSn) {
				// 订单列表
				db.collection('t_shop_order')
				.where({ order_sn:orderSn }).get().then((res)=>{
					order = res.result.data[0]
					// console.log(order)
				})  
			},
			async getData() {
				// 评价列表
				// console.log(this.uid)
				let remarkInfo  = []
				let res = await db.collection('t_shop_orderevaluate')
					.where({ users_id: this.uid }).get()   
				// console.log(res.result.data)
				remarkInfo = res.result.data 
				this.remark = remarkInfo 
				for (let i = 0; i < res.result.data.length; i++) {   
					// 订单列表 
						this.getOrder(res.result.data[i].order_sn)
						// console.log(order)
						// order = orderres.result.data[0] 
						// 地址
						let id_address= order.id_address
						let addressres = await db.collection('t_shop_address')
						.where({_id:id_address}).get().catch((err)=>{
								console.log("error")
							})
						let addressInfo =  addressres.result.data[0]
						let code =  addressInfo.address
						let detial =  addressInfo.address_detial
						// console.log(i)
					this.getAddress(code,detial,i)
					// 商品列表
					realPrice.push(order.real_price)
					totalPrice.push(order.total_price)
					// console.log(this.remark[i].real_price,this.remark[i].total_price)
						let order_Id = order._id
					this.getGoodsInfo(order._id)
					this.list = listgoods
				} 
			},
			getGoodDetail(i) {
				// console.log(i)
				let id = goods[i].id_goods
				// console.log(id)
				db.collection('t_shop_goods').where({
						_id: id
					})
					.get().then((res) => {
						// console.log(res.result.data[0].name) 
						goods[i].name = res.result.data[0].name
						goods[i].descript = res.result.data[0].descript
						goods[i].pic = res.result.data[0].pic
					}).catch((err) => {
						console.log("error")
					})
			},
			getGoodsInfo(id) {
				// console.log(id)
				let allGoods = []
				db.collection('t_shop_order_item').where({
						id_order: id
					})
					.get().then((rs) => {
						allGoods = rs.result.data
						goods = allGoods 
						// console.log(allGoods)
						for (let i = 0; i < allGoods.length; i++) {
							this.getGoodDetail(i)
							listgoods.push(goods)
							// console.log(listgoods)
						}
					}).catch((err) => {
						console.log("error")
					})
			},
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #ffff;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 100%;
		background-color:#ffff;
		margin: 1%;
		border-radius: 10rpx;
		box-sizing: border-box;
		// padding: 5rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;
			flex: auto;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {

				color: #f29100;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				flex: 1;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: #909399;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-right: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: #909399;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				margin-left: 20rpx;
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid #e4e7ed;
				font-size: 26rpx;
				text-align: center;
				color: #82848a;
			}

			.evaluate {
				color: #f29100;
				border-color: #f29100;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
